<!--
 * @Author: your name
 * @Date: 2021-04-07 17:49:39
 * @LastEditTime: 2021-04-22 22:02:36
 * @LastEditors: Please set LastEditors
 * @Description: 时间段选择器
 * @FilePath: /medicine-web/src/components/CustomDateRanger/index.vue
-->
<template>
  <div class="date-ranger-container">
    <a-range-picker :value="dateRange" :mode="mode" format="YYYY" @panelChange="handlePanelChange2" :placeholder="['开始时间', '结束时间']" :size="'large'">
      <a-icon slot="suffixIcon" type="calendar" />
    </a-range-picker>
  </div>
</template>
<script>
export default {
  name: 'customDateRanger',
  data () {
    return {
      dateRange: [],
      mode: ['year', 'year']
    }
  },
  methods: {
    handlePanelChange2 (value, mode) {
      this.dateRange = value
      this.mode = ['year', 'year']
      this.$emit('selectTimeRange', value)
    }
  },
}
</script>
<style lang="scss" scoped>
.date-ranger-container {
  /deep/ .ant-input {
    border-radius: 10px;
  }
}
</style>
